<template>
    <div style="width: 500px">
        <el-input
            placeholder="请输入部门名称进行搜索..."
            prefix-icon="Search"
            v-model="filterText">
        </el-input>

        <el-tree
            show-checkbox
            :data="deps"
            :props="defaultProps"
            node-key="id"
            default-expand-all
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            ref="treeRef" style="margin-top: 5px;">
            <template #default="scope">
                <span style="display: flex;justify-content: space-between;width: 100%">
                  <span>{{ scope.name }}</span>
                  <span>
                    <el-button
                        type="text"
                        size="mini"
                        class="depBtn"
                        icon="Plus" @click="addDepartHandler(scope)"></el-button>
                      <el-button
                          type="text"
                          size="mini"
                          class="depBtn"
                          icon="Delete"
                          style="color: #ff0000" @click="deleteDepartHandler(scope)"></el-button>
                  </span>
                </span>
            </template>
        </el-tree>
        <el-dialog
                v-model="dialogVisible"
                title="添加部门"
                width="30%"
        >
                <div>
                    <table>
                        <tr>
                            <td>
                                <el-tag>上级部门</el-tag>
                            </td>
                            <td>
                                {{pname}}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <el-tag>部门名称</el-tag>
                            </td>
                            <td>
                                <el-input v-model="dep.name" placeholder="请输入部门名称..."/>
                            </td>
                        </tr>
                    </table>
                </div>
                <template #footer>
                      <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="addDepartmentHandler">确认</el-button>
                      </span>
                </template>
        </el-dialog>
    </div>
</template>

<script>
    import {getRequest, postRequest} from "../../../http";

    export default {
        name: "DepManagement",
        data(){
            return {
                filterText:'',
                deps:[],
                defaultProps:{
                    children:'children',
                    label:'name'
                },
                dialogVisible:false,
                dep:{
                    name:'',
                    parentId:''
                },
                pname:''
            }
        },
        watch:{
            filterText(val){
                this.$refs.treeRef.filter(val);
            }
        },
        mounted() {
            this.initDeps();
        },
        methods:{
            addDepartmentHandler(){
                postRequest('Department/basic?pid='+this.dep.parentId+'&departName='+this.dep.name).then(resp=>{
                    if(resp){
                        this.dialogVisible = false;
                        this.dep.name='';
                        this.dep.parentId=-1;
                    }
                });
            },
            addDepartHandler(data){
                this.pname = data.name;
                this.dep.parentId = data.id;
                this.dialogVisible = true;
            },
            deleteDepartHandler(data){},
            filterNode(value, data){
                if(!value){
                    return true;
                }
                return data.name.indexOf(value)!==-1;
            },
            initDeps(){
                getRequest('data/department.json').then(resp=>{
                    if(resp){
                        this.deps = resp;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .depBtn{
        padding: 2px;
    }
</style>
